.constructor {
  display: inline-flex;
  flex-direction: column;
  padding: 0 .5rem .5rem .5rem;
  border: 1px solid #cccccc;
  .show {
    display: flex;
    flex-direction: column;
    height: 4rem;
    border-bottom: 1px solid #cccccc;
    .display {
      height: 2rem;
      border-bottom: 1px solid #cccccc;
    }
    .result {
      height: 2rem;
    }
  }
  .btn {
    display: grid;
    padding-top: .5rem;
    grid-template-rows: repeat(5, 2rem);
    grid-template-columns: repeat(5, 2rem);
    row-gap: .5rem;
    column-gap: .5rem;
    grid-auto-flow: row dense;
    // justify-items: center;
    // align-items: center;
    // place-items: center center;
    // place-content: center center;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      cursor: pointer;
      &:hover {
        background-color: #cccccc;
      }
      &:nth-last-child(3) {
        // grid-row-start: 4;
        // grid-row-end: 6;
        // grid-column-start: 4;
        grid-row: 4 / span 2;
        grid-column: 4 / span 2;
        // place-self: center center;
      }
      &:nth-last-child(2) {
        grid-column: 1 / span 2;
      }
    }
  }
}
